<template>
  <div class="chatBox flex">
    <UserConfig />
    <MessageTab  v-if="chatStore.isTabActive('chat')"/>
    <FrindTab  v-if="chatStore.isTabActive('friends')"/>
  </div>

  <button @click="handleAddGroup">创建群组</button>
  <br>
  <button @click="handleJoinGroup">加入群组</button>

  <br>
  <button @click="handleSendGroupMessage">发送群组信息</button>

  <br>
  <button @click="handleSendFriendMessage">发送私聊信息</button>
  <br>
  <!-- <button @click="handleChatData">获取s所有数据</button> -->
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import useUserStore from '@/stores/user'
import { Socket } from 'socket.io-client';
import { Button } from '@/utils/primevue'
import UserConfig from './components/UserConfig.vue'
import MessageTab from './MessageTab/index.vue'
import FrindTab from './FriendTab/index.vue'
import useChatStore from '@/stores/chat'

const chatStore = useChatStore()
const userStore = useUserStore()
const socketRef = ref<Socket>()

onMounted(() => {
})

const handleAddGroup = () => {
  socketRef.value?.emit('addGroup', {
    // userId: '54979c55-acf2-41a2-94dc-65b8ee379e45',
    userId: 'ae7c6cfb-a3cf-4160-8911-1868664b8eed',
    groupName: "测试1"
  })
}

const handleJoinGroup = () => {
  socketRef.value?.emit('joinGroup', {
    groupId: '481a35d4-f7d1-4496-8355-594347aecbeb',
    userId: "ae7c6cfb-a3cf-4160-8911-1868664b8eed"
  })
}

const handleSendGroupMessage = () => {
  socketRef.value?.emit('groupMessage', {
    userId: "ae7c6cfb-a3cf-4160-8911-1868664b8eed",
    groupId: '481a35d4-f7d1-4496-8355-594347aecbeb',
    content: '测试发送群消息',
    messageType: 'text'
  })
}

const handleSendFriendMessage = () => {
  socketRef.value?.emit('friendMessage', {
    userId: "ae7c6cfb-a3cf-4160-8911-1868664b8eed",
    friendId: '12f9446b-2dbf-4d92-ab7b-5e7bcdea9df8',
    content: '测试发送私聊消息给admin3',
    messageType: 'text'
  })
}

</script>

<style scoped lang="scss">
.chatBox {
  width: 80%;
  height: 80%;
  margin: 5% auto 0;
  background: #ffffff2e;
}
</style>

